let that

class Tab {
  constructor(id) {
    that = this
    this.main = document.querySelector(id)
    this.addBtn = this.main.querySelector('.tabadd')
    this.ul = this.main.querySelector('.fisrstnav ul')
    this.sectionsFather = this.main.querySelector('.tabscon')
    // this.addBtn.addEventListener('click', this.addTabs.bind(this))

    this.init()
  }

  //获取li和section
  updata() {
    this.lis = this.main.querySelectorAll('.fisrstnav li')
    this.sections = this.main.querySelectorAll('.tabscon section')
    this.delBtns = this.main.querySelectorAll('.fisrstnav li .icon-guanbi')
    this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
  }

  //初始化事件
  init() {
    this.updata()
    // this.addBtn.addEventListener('click', this.addTabs.bind(this))
    this.addBtn.onclick = this.addTabs.bind(this)
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i
      this.lis[i].addEventListener('click', this.toggleTabs)
      this.delBtns[i].addEventListener('click', this.delTabs)
      this.spans[i].addEventListener('dblclick', this.editTabs)
      this.sections[i].ondblclick = this.editTabs
    }

    // this.lis.forEach((item, index) => {
    //   item.addEventListener('click', this.toggleTabs.bind(this, item, index))
    // })
  }
  // 清除所有类名
  clearClass() {
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }

  // 切换事件
  // toggleTabs(li, index) {
  //   this.clearClass()
  //   li.className = 'liactive'
  //   this.sections[index].className = 'conactive'
  // }
  toggleTabs() {
    that.clearClass()
    this.className = 'liactive'
    // console.log(this.index)
    that.sections[this.index].className = 'conactive'
  }

  //添加事件
  addTabs() {
    that.clearClass()
    const li = `<li class="liactive"><span>新增的测试li</span><span class="iconfont icon-guanbi"></span></li>`
    const section = `<section class="conactive">新增${Math.random()}</section>`
    that.ul.insertAdjacentHTML('beforeend', li)
    that.sectionsFather.insertAdjacentHTML('beforeend', section)
    that.init()
  }
  // addTabs() {
  //   this.clearClass()
  //   const li = `<li class="liactive"><span>新增的测试li</span><span class="iconfont icon-guanbi"></span></li>`
  //   const section = `<section class="conactive">新增${Math.random()}</section>`
  //   this.ul.insertAdjacentHTML('beforeend', li)
  //   this.sectionsFather.insertAdjacentHTML('beforeend', section)
  //   this.init()
  // }

  //删除事件
  delTabs(e) {
    // console.log('wobeishanchule')
    e.stopPropagation()
    // console.log(this.parentNode.index)
    let index = this.parentNode.index
    this.parentNode.remove()
    that.sections[index].remove()
    if (that.main.querySelector('.liactive')) return
    if (index === 0) {
      that.init()
      that.lis[0] ? that.lis[0].click() : ''
      // that.lis[0]?.click()
    } else {
      index--
      that.lis[index].click()
    }
  }

  //编辑事件
  editTabs() {
    // console.log(1)
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    let spanValue = this.innerHTML
    // console.log(this.innerHTML)
    this.innerHTML = `<input type="text">`
    // console.log(this.children)`
    let input = this.children[0]
    input.value = spanValue
    input.select()
    input.onblur = that.inputValue
    // input.focus()
    input.addEventListener('keyup', that.inputKeyUp)
  }

  inputValue() {
    // console.log(this)
    this.parentNode.innerHTML = this.value
  }

  inputKeyUp(e) {
    if (e.keyCode === 13) {
      this.blur()
    }
  }
}

new Tab('#tab')
